一、左中右布局，左边定宽，中、右百分比的布局：

（1）HTML代码：

（2）CSS代码：

.three-left {
     float: left;  width: 300px;  }.three-right-container {
     margin-left: 300px;  }.three-mid {
     float: left;  width: 50%;  }.three-right {
     float: left;  width: 50%;  }

二、左中右布局，中定宽，左右百分比的布局：

（1）HTML代码：

（2）CSS代码：

.three-left,.three-right {
       float: left;    width: 50%;    margin:0 0 0 -151px;}.innerLeft,.innerRight {
       margin: 0 0 0 151px;    background-color: #efefef;}.three-mid {
       float: left;    width: 300px;    background-color: #ccc;}

三、jquery获取本地json文件的方法：

$.ajax({    url: "test.json",    dataType: "json",    success: function(result){        //result即为该json文件的数据    }});

四、获取DOM元素的data属性：

（1）HTML代码：

（2）jquety代码：

var _data = $("div").attr("data-value");console.log(_data);    //_data的值即为HTML代码中div的data-value的值

五、添加动态添加元素的点击跳转事件：

（1）HTML代码：

（2）jquery代码：

$.ajax({    url: 'test.json',    dataType: 'json',    success: function(result){        var list = result.list;        var htmlArr = [];        for(var i = 0; i < list.length; i ++){            if(list[i].url && list[i].url != ""){                htmlArr .push('' + list[i].name + '');            } else {                htmlArr .push('' + list[i].name + '');                }            $(".content").append(htmlArr.join(""));        }       }});

 （3）test.json文件：

{"list":[     {
    "name": "aaa1", "url": ""},      {
    "name": "aaa2", "url": ""},      {
    "name": "aaa3", "url": ""},      {
    "name": "bbb1", "url": ""},      {
    "name": "bbb2", "url": ""},      {
    "name": "bbb3", "url": ""}  ]}

 

六、获取json文件的数据，并加载到下拉列表以及文本框，再根据下拉列表的值动态显示文本框的值的方法：

 （1）HTML代码：

（2）jquery代码：

$.ajax(function(){    url: "test.json",    dataType: "json",    success: function(result){        var list = result.list;        var htmlArr = [];         $(".select-content").html(list[0].name);    //下拉框的默认显示list列表的第一条数据         for(var i = 0; i < list[0].typeList.length; i ++){             if(list[0].typeList[i].url && list[0].typeList[i].url != ""){                htmlArr .push('' + list[0].typeList[i].name + '');            } else {                htmlArr .push('' + list[0].typeList[i].name + '');            }        }    //文本展示框默认显示list列表第一条typeList数据        $(".show-content").append(htmlArr.join(""));                var htmlArr = [];         for(var i = 0; i < list.length; i ++){             $(".list-content ul").append("
' + list[i].name + '
");          }    //下拉框列表的展示数据    //下拉框的点击事件        $(".list-content ul").delegate("li", "click", function(){            $(".show-content").empty();            var _liVal = $(this).attr("dta-value");            var htmlArr = [];            $(".select-content").html(list[_liVal].name);            for(var i = 0; i < list[_liVal].typeList.length; i ++){               if(list[_liVal].typeList[i].url && list[_liVal].typeList[i].url != ""){                    htmlArr .push('' + list[_liVal].typeList[i].name + '');            } else {                htmlArr .push('' + list[_liVal].typeList[i].name + '');            }         }    //根据下拉框选中的值再显示文本框的值        $(".show-content").append(htmlArr.join(""));        });    }});

 

 （3）test.json文件：

{"list":[  {     "name": "aaa",     "typeList": [         {
    "name": "aaa1", "url": ""},          {
    "name": "aaa2", "url": ""},          {
    "name": "aaa3", "url": ""}       ]      },   {     "name": "bbb",     "typeList": [         {
    "name": "bbb1", "url": ""},          {
    "name": "bbb2", "url": ""},          {
    "name": "bbb3", "url": ""}       ]      } ]}

 

 七、display: inline-block;在IE7下没效果的解决方法：

.content {
       display: inline-block;    *display: inline;    *zoom: 1;}

 八、设置border圆角渐变（不兼容IE）：

（1）HTML代码：

 

（2）CSS代码：

.border{
       position: relative;    border: 4px solid transparent;    border-radius: 16px;    background: linear-gradient(orange, violet);    background-clip: padding-box;    padding: 10px;    /* just to show box-shadow still works fine */    box-shadow: 0 3px 9px black, inset 0 0 9px white;}.border::after{
       position: absolute;    top: -4px; bottom: -4px;    left: -4px; right: -4px;    background: linear-gradient(red, blue);    content: '';    z-index: -1;    border-radius: 16px;}

 九、设置子元素的样式（第一个和第四个相同、第二个和第五个相同、第三个和第六个相同...以此类推），兼容IE的做法：

（1）HTML代码：

     
    
      
        
       
        This is content!!!
       
    
    
      
        
       
        This is content!!!
       
    
    
      
        
       
        This is content!!!
       
    
    
      
        
       
        This is content!!!
       
    
    
      
        
       
        This is content!!!
       
    
    
      
        
       
        This is content!!!
       
    
     

 

（2）jQuery代码：

$("ul li:nth-child(3n) .con").css("background", "#CCC");$("ul li:nth-child(3n+1) .con").css("background", "#CCC");$("ul li:nth-child(3n+2) .con").css("background", "#CCC");

 十二、select下拉框的一些操作：

（1）HTML代码：

    1    2    3    4    5    6

 

（2）jquery代码：